<template>
  <!-- 收费月报 -->
  <div>
    <div class="pay_box">
      <el-form>
        <el-form-item label="收费日期">
          <el-date-picker v-model="form.orderTimeStart" class="pay_date" type="date" value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>----
          <el-date-picker style="marigin-left:4%;" v-model="form.orderTimeEnd" class="pay_date" type="date" value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker>
          <el-button type="primary" circle icon="el-icon-search" @click="getChartTable(-1)"></el-button>
          <el-button type="primary" style="float:right;" @click="exportExcel()">导出</el-button>
        </el-form-item>
      </el-form>
      <div ref="linechart" class="chart_box">

      </div>
    </div>
    <div class="pay_box">
      <table class="table-box">
        <thead>
          <tr>
            <th style="text-align:center;font-size:18px;" colspan="21">收费月报报表</th>
          </tr>
          <tr>
            <th>日期</th>
            <th>费用统计</th>
            <th>折后金额</th>
            <th>实收合计</th>
            <th>现金</th>
            <th>银行卡</th>
            <th>微信</th>
            <!-- <th>支付宝</th> -->
            <!-- <th>积分抵扣</th> -->
            <th>余额支付</th>
            <!-- <th>医保支付</th> -->
            <!-- <th>商保支付</th> -->
            <th>挂账</th>
            <th>卡券</th>
            <th>减免</th>
            <th>人数</th>
            <th>人次</th>
            <th>客单价</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tabList" :key="index">
            <td>{{item.dateDay}}</td>
            <td>￥{{item.allMoney}}</td>
            <td>￥{{item.realityMoney}}</td>
            <td>￥{{item.receiptsMoney}}</td>
            <td>￥{{item.xianJin}}</td>
            <td>￥{{item.yinHangKa}}</td>
            <td>￥{{item.weiXin}}</td>
            <!-- <td>￥{{item.zhiFubao}}</td> -->
            <!-- <td>￥{{item.jiFen}}</td> -->
            <td>￥{{item.yuE}}</td>
            <!-- <td>￥{{item.yiBao}}</td> -->
            <!-- <td>￥{{item.shangBao}}</td> -->
            <td>￥{{item.guaZhang}}</td>
            <td>￥{{item.kaQuan}}</td>
            <td>￥{{item.jianMian}}</td>
            <td>{{item.patientNum}}</td>
            <td>{{item.orderNum}}</td>
            <td>{{item.keDanMoney}}</td>
          </tr>
          <tr class="foot_tatol">
            <td>合计</td>
            <td>￥{{orderDayCount.allAmount}}</td>
            <td>￥{{orderDayCount.allrealityMoney}}</td>
            <td>￥{{orderDayCount.allreceiptsMoney}}</td>
            <td>￥{{orderDayCount.xianJin}}</td>
            <td>￥{{orderDayCount.yinHangKa}}</td>
            <td>￥{{orderDayCount.weiXin}}</td>
            <!-- <td>￥{{orderDayCount.zhiFubao}}</td> -->
            <!-- <td>￥{{orderDayCount.jiFen}}</td> -->
            <td>￥{{orderDayCount.yuE}}</td>
            <!-- <td>￥{{orderDayCount.yiBao}}</td> -->
            <!-- <td>￥{{orderDayCount.shangBao}}</td> -->
            <td>￥{{orderDayCount.guaZhang}}</td>
            <td>￥{{orderDayCount.kaQuan}}</td>
            <td>￥{{orderDayCount.jianMian}}</td>
            <td>{{orderDayCount.patientNum}}</td>
            <td>{{orderDayCount.orderNum}}</td>
            <td>￥{{orderDayCount.keDanMoney}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <br />
    <!-- <pager v-model="pager" @change-pagenum="getChartTable"></pager> -->
  </div>
</template>
<script>
import Excel from "@/_js/excel.js";
export default {
  data() {
    var labelOption = {
      normal: {
        show: false,
        formatter: "{c}",
        fontSize: 16,
        rich: {
          name: {
            textBorderColor: "#fff"
          }
        }
      }
    };
    return {
      form: {
        orderTimeStart: "",
        orderTimeEnd: ""
      },
      orderDayCount: {
        allAmount: 0,
        allrealityMoney: 0,
        allreceiptsMoney: 0,
        xianJin: 0,
        yinHangKa: 0,
        weiXin: 0,
        // zhiFubao: 0,
        // jiFen: 0,
        yuE: 0,
        // yiBao: 0,
        // shangBao: 0,
        guaZhang: 0,
        kaQuan: 0,
        jianMian: 0,
        patientNum: 0,
        orderNum: 0,
        keDanMoney: 0
      },
      showDay: false,
      pager: { pageSize: 10, pageNum: 1, total: 0 },
      tabList: [],
      chart: null,
      option: {
        color: ["#003366", "#006699", "#4cabce", "#e5323e"],
        tooltip: {
          trigger: "axis"
          // axisPointer: {
          //   type: "shadow"
          // }
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "2%",
          containLabel: true
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center"
        },
        // calculable: true,
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: []
          }
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            name: "费用总计"
          }
        ],
        series: [
          {
            name: "",
            type: "line",
            barGap: 0,
            label: labelOption,
            smooth: true,
            data: [235, 152, 86, 92, 135]
          }
        ]
      }
    };
  },
  mounted() {
    this.form.orderTimeStart = this.getDate();
    this.form.orderTimeEnd = this.getNewDate();
    this.getChartTable();
  },
  methods: {
    getChartTable() {
      let th = this;
      th.showLoading();
      let j = Object.assign(th.form, th.pager);
      th.$api
        .getOrderMonthReport(j)
        .then(res => {
          if (res.executed) {
            th.tabList = res.dataBody.orderMonthList;
            th.pager.total = res.dataBody.orderMonthList.length;
            let list = res.dataBody.orderMonthList;
            let all_data = [];
            let order = {
              allAmount: 0,
              allrealityMoney: 0,
              allreceiptsMoney: 0,
              xianJin: 0,
              yinHangKa: 0,
              weiXin: 0,
              // zhiFubao: 0,
              // jiFen: 0,
              yuE: 0,
              // yiBao: 0,
              // shangBao: 0,
              guaZhang: 0,
              kaQuan: 0,
              jianMian: 0,
              patientNum: 0,
              orderNum: 0,
              keDanMoney: 0
            };
            for (let i = 0; i < list.length; i++) {
              all_data.push(list[i].allMoney);
              order.allAmount += Number(list[i].allMoney);
              order.allrealityMoney += Number(list[i].realityMoney);
              order.allreceiptsMoney += Number(list[i].receiptsMoney);
              order.xianJin += Number(list[i].xianJin);
              order.yinHangKa += Number(list[i].yinHangKa);
              order.weiXin += Number(list[i].weiXin);
              // order.zhiFubao += Number(list[i].zhiFubao);
              // order.jiFen += Number(list[i].jiFen);
              order.yuE += Number(list[i].yuE);
              // order.yiBao += Number(list[i].yiBao);
              // order.shangBao += Number(list[i].shangBao);
              order.guaZhang += Number(list[i].guaZhang);
              order.kaQuan += Number(list[i].kaQuan);
              order.jianMian += Number(list[i].jianMian);
              order.patientNum += Number(list[i].patientNum);
              order.keDanMoney += Number(list[i].keDanMoney);
              order.orderNum += Number(list[i].orderNum);
            }
            order.allrealityMoney = order.allrealityMoney.toFixed(2);
            order.allAmount = order.allAmount.toFixed(2);
            order.allreceiptsMoney = order.allreceiptsMoney.toFixed(2);
            order.keDanMoney = order.keDanMoney.toFixed(2);
            order.jianMian = order.jianMian.toFixed(2);
            order.guaZhang = order.guaZhang.toFixed(2);
            order.kaQuan = order.kaQuan.toFixed(2);
            order.weiXin = order.weiXin.toFixed(2);
            order.xianJin = order.xianJin.toFixed(2);
            th.orderDayCount = order;
            th.option.xAxis[0].data = res.dataBody.dayList;
            th.option.series[0].data = all_data;
            th.chart = echarts.init(th.$refs["linechart"]);
            th.chart.setOption(th.option);
            th.showLoading(false);
          } else {
            th.$message.error(res.message);
            th.showLoading(false);
          }
        })
        .catch(error => {
          th.showLoading(false);
        });
    },
    exportExcel() {
      let th = this;
      //导出
      let j = Object.assign(th.form, th.pager);
      j.pageSize = "1000";
      th.$api.getOrderMonthReport(j).then(res => {
        if (res.executed) {
          if (res.dataBody != undefined) {
            let data = res.dataBody.orderMonthList;
            Excel(
              data,
              [
                { key: "dateDay", name: "日期" },
                { key: "allMoney", name: "费用统计" },
                { key: "realityMoney", name: "折后金额" },
                { key: "receiptsMoney", name: "实收合计" },
                { key: "xianJin", name: "现金" },
                { key: "yinHangKa", name: "银行卡" },
                { key: "weiXin", name: "微信" },
                // { key: "zhiFubao", name: "支付宝" },
                // { key: "jiFen", name: "积分抵扣" },
                { key: "yuE", name: "余额支付" },
                // { key: "yiBao", name: "医保支付" },
                // { key: "shangBao", name: "商保支付" },
                { key: "guaZhang", name: "挂账" },
                { key: "kaQuan", name: "卡券" },
                { key: "jianMian", name: "减免" },
                { key: "patientNum", name: "人数" },
                { key: "orderNum", name: "人次" },
                { key: "keDanMoney", name: "客单价" }
              ],
              "收费月报"
            );
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.pay_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  overflow-x: auto;
  .table-box {
    min-width: 600px;
    font-size: 12px;
    .foot_tatol td{
      color: $error-color; 
    }
  }
}
.pay_date {
  width: 10% !important;
  margin-right: 1%;
}
.chart_box {
  height: 400px;
  display: inline-block;
  width: 100%;
}
</style>